<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'orders' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ '订单详情' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div style="height: 30px"></div>
    <div class="order-info">
      <!-- 1:待付款 2:待上门 3:服务中 4:已完成 5:已取消 -->
      <div class="btn item">{{ handleStaus(form.status) }}</div>
      <div class="item" style="width: 40%">订单编号：{{ form.order_no }}</div>
      <div class="item" style="width: 40%">下单时间：{{ formatTime(form.created_at) }}</div>
    </div>
    <div class="order-info">
      <div class="item">客户名称：{{ form.customer_name }}</div>
      <div class="item">客户手机：{{ form.customer_mobile }}</div>
      <div class="item">客户地址：{{ form.address }}</div>
      <div class="item">商品名称：{{ form.goods_name }}</div>
      <div class="item">商品数量：{{ form.goods_count }}</div>
      <div class="item">订单总价：¥{{ form.order_price }}</div>
      <div class="item">预约时间：{{ form.subscribe_time }}</div>
      <div class="item">订单渠道：{{ form.channel_name }}</div>
      <div class="item" style="width: 100%">订单备注：{{ form.remark }}</div>
      <div class="item">上门师傅：{{ form.worker_name }}</div>
      <div class="item">师傅手机：{{ form.worker_phone }}</div>
      <div class="item">上门时间：{{ form.work_time }}</div>
    </div>

    <div class="order-info">
      <div class="item" style="width: 100%">实收金额：¥{{ form.real_price }}</div>
      <div class="item">实收说明：{{ form.payment_desc || '' }}</div>
    </div>

    <div class="actions-btn">
      <el-button type="primary" @click="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderInfo } from '@/api/order'
import { formatTime } from '@/utils'

const route = useRoute()
const router = useRouter()

const cancel = () => {
  router.push({ name: 'orders' })
}
const form = ref({
  nickname: '',
  phone: '',
  address: '',
  goods_id: '',
  goods_count: 1,
  payment_prove: '',
  remark: '',
})
const handleStaus = (status) => {
  // 1:待付款 2:待上门 3:服务中 4:已完成 5:已取消 6:退款中 7:已退款 8:退款失败
  const statusMap = {
    '1': '待付款',
    '2': '待上门',
    '3': '服务中',
    '4': '已完成',
    '5': '已取消',
    '6': '退款中',
    '7': '已退款',
    '8': '退款失败'
  }
  return statusMap[status] || '-'
}
onMounted(async () => {
  const res = await getOrderInfo(route.query.id)
  form.value.order_no = res.data.order_no
  form.value.created_at = res.data.created_at
  form.value.customer_name = res.data?.customer_name
  form.value.customer_mobile = res.data?.customer_mobile
  form.value.address = res.data?.address
  form.value.goods_name = res.data.goods_name
  form.value.goods_count = res.data.goods_count
  form.value.payment_prove = res.data.payment_prove
  form.value.remark = res.data.remark
  form.value.order_price = res.data.order_price
  form.value.worker_name = res.data.worker_name
  form.value.worker_phone = res.data.worker_phone
  form.value.work_time = res.data.work_time
  form.value.real_price = res.data.real_price
  form.value.payment_desc = res.data.payment_desc
  form.value.subscribe_time = res.data.subscribe_time
  form.value.channel_id = res.data.channel_id
  form.value.status = res.data.status
  form.value.channel_name = res.data.channel_name
})
</script>

<style scoped lang="scss">
.order-info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid #ddd;
  padding: 20px 20px 0;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
  .item {
    width: 30%;
    margin-bottom: 20px;
  }
  .btn {
    width: 100px;
    height: 25px;
    background-color: #409eff;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    margin-right: 40px;
  }
}
</style>
